<template>
	<ul class="list">
		<li class="item" v-for="item of letters" :key="item" @click="handleLetterClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :ref="item">{{item}}</li>
	</ul>
</template>

<script>
export default{
	name:'CityAiphabet',
	props:{
		cities:Object
	},
	computed:{
		letters(){
			const letters=[]
			for(let i in this.cities){
				letters.push(i)
			}
			return letters
		}
	},
	data(){
		return{
			touchstart:false,
			startY:0,
			timer:null
		}
	},
	updated () {
		this.startY=this.$refs['A'][0].offsetTop
	},
	methods:{
		handleLetterClick(e){
			this.$emit("change",e.target.innerText)
		},
		handleTouchStart(){
			this.touchstart=true
		},
		handleTouchMove(e){
			if(this.touchstart){
				if(this.timer){
					clearTimeout(this.timer)
				}
				this.timer=setTimeout(() => {
					const touchY=e.touches[0].clientY-79
					const index=Math.floor((touchY-this.startY)/20)
					if(index >= 0 && index < this.letters.length)
					{
						this.$emit("change",this.letters[index])
					}	
				},16)							
			}
		},
		handleTouchEnd(){
			this.touchstart=false
		}
	}
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
	display:flex
	flex-direction:column
	justify-content:center
	position:absolute
	top:1.58rem
	right:0
	bottom:0
	width:.4rem
	.item
		line-height:.4rem
		text-align:center
		color:$bgColor
</style>